<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="../styles/global.css">
    <link rel="stylesheet" href="../styles/layout.css">
    <link rel="stylesheet" href="../dependencies/element-ui-2.15.14/index.css">
    <script type="text/javascript" src="../dependencies/vue-2.7.16/vue.js"></script>
    <script type="text/javascript" src="../dependencies/element-ui-2.15.14/index.js"></script>
    <script type="text/javascript" src="../dependencies/axios/axios.min.js"></script>
</head>
<body>
<div id="app" class="main-container" style="height: 100%">
    <el-header class="main-header">
        <a href="#" class="logo" style="text-align:center">
            <h1 style="text-align: center;">LOGO</h1>
        </a>
        <div class="header-right">
            <el-dropdown class="avatar-container" @command="handleCommand">
                <div class="avatar-wrapper">
                    <img src="../assets/logo.png" class="user-avatar" alt="">
                    <span>Admin</span>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="exit">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </el-header>
    <el-container style="height: calc(100% - 70px)">
        <el-aside width="200px">
            <el-menu
                    default-active="1">
                <el-submenu v-for="menu in menuList" :index="menu.index">
                    <template slot="title">
                        <i :class="menu.icon"></i>
                        {{menu.title}}
                    </template>
                    <template v-for="child in menu.children">
                        <el-menu-item :index="child.index">
                            <i :class="child.icon"></i>
                            <a :href="child.url" target="content-iframe">{{child.title}}</a>
                        </el-menu-item>
                    </template>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-main style="padding: 0">
            <iframe name="content-iframe" class="el-main" style="padding: 0" src="./home.html" width="100%"
                    height="100%"
                    frameborder="0"></iframe>
        </el-main>
    </el-container>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      menuList: [{
        "index": "1",
        "icon": "el-icon-s-home",
        "title": "系统首页",
        "children": []
      },
        {
          "index": "2",
          "icon": "el-icon-s-tools",
          "title": "系统管理",
          "children": [{
            "index": "2-1",
            "icon": "el-icon-user-solid",
            "title": "用户管理",
            "url": "user.html",
            "children": []
          },
            {
              "index": "2-2",
              "icon": "el-icon-s-check",
              "title": "角色管理",
              "url": "role.html",
              "children": []
            }, {
              "index": "2-3",
              "icon": "el-icon-location",
              "title": "部门管理",
              "url": "dept.html",
              "children": []
            }, {
              "index": "2-4",
              "icon": "el-icon-menu",
              "title": "权限管理",
              "url": "permission.html",
              "children": []
            },
          ]
        },

      ]
    },
    methods: {
      handleCommand(command) {
        window.location.href = '../index.html'
      }
    }
  });
</script>
</html>